import { defineStore } from 'pinia'

/**
 * 参数1：仓库的名字，在开发者工具中，可以看到
 * 参数2：选项式API
 *
 * Vuex的核心概念
 *      state：定义数据
 *      getters：获取数据
 *      mutations：同步的操作数据
 *      actions：异步的操作数据，最终借助于 mutations
 *      modules：拆分
 *
 * Pinia中的核心概念
 *      state：定义数据，它是函数，返回对应
 *      getters：获取值（有缓存）
 *      actions：同步&异步一起包了
 *
 * 调用defineStore得到的是一个函数，页面导入该函数之后，调用它，就可以得到仓库了store
 * 得到仓库之后，就可以直接调用它的方法等...
 *
 * 这个官方叫做 Option Store，它里面用的是选项式API
 */
export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      num: 6
    }
  },
  getters: {
    doubleCount: state => state.num * 2
  },
  // actions
  actions: {
    // 同步
    add (val: number) {
      this.num += val
    },
    // 异步
    asyncAdd (val: number) {
      setTimeout(() => {
        this.num += val
      }, 2000)
    }
  }
})
